
<template>
  <ul>
    <div style="margin-bottom:1rem;">查询结果</div>
    <li class="header">
      <span class="one">序号</span>
      <span class="one">ID</span>
      <!-- <span class="two">sn</span> -->
      <span class="two">设备名称</span>
      <span class="three"><el-checkbox :value="selectAll" @change="selectAllChange"></el-checkbox>
      </span>
    </li>
    <template v-if="equipList.length !==0">
      <li v-for="(item,index) in equipList" :key="item.id" @click="chooseEquip(item)" :class="{'active':eid===item.id}" :title="`sn:${item.sn.join('')}`">
        <span class="one">{{index+1}}</span>
        <span class="one">{{item.id}}</span>
        <!-- <span class="two">{{item.sn.join('')}}</span> -->
        <span class="two">{{item.label}}</span>
        <span class="three">
          <el-checkbox v-model="item.checked" @change="chooseEquips" @click.stop.native="()=>{}"></el-checkbox>
        </span>
      </li>
    </template>
    <li v-else style="justify-content:center;padding:3rem 0;">暂无设备</li>
  </ul>
</template>

<script>
export default {
  props:{
    equipList:{
      type:Array,
      required:true
    },
  },
  data(){
    return {
      eid:''
    }
  },
  computed:{
    selectAll(){
      if(this.equipList.length === 0)
        return false;
      return this.equipList.every(item=>item.checked)
    },
    ids(){
      // console.log(this.equipList.filter(item=>item.checked))
      return this.equipList.filter(item=>item.checked).map(item=>item.id);
    }
  },
  methods:{
    unSelectAll(id){
      this.equipList.forEach((item)=>{
        item.id!=id&&(item.checked=false);
      })
    },
    selectAllChange(){
      const flag = !this.selectAll;
      this.equipList.forEach(item=>{
        item.checked = flag;
      })
      if(!this.$store.state.User.status){
        this.$message.error("请先搜索设备");
        return
      }
      this.$emit('chooseEquips',this.ids);
    },
    chooseEquip(item){
      this.eid = item.id;
      if(!this.$store.state.User.status){
        this.$message.error("请先搜索设备");
        this.$emit('clearEquipList');
        return
      }
      const eid = item.id;
      const sn = item.sn;
      this.$emit('chooseEquip',{eid,sn});
    },
    chooseEquips(){
      if(!this.$store.state.User.status){
        this.$message.error("请先搜索设备");
        return
      }
      this.$emit('chooseEquips',this.ids);
    }
  }
}
</script>

<style lang="scss" scoped>
  ul{
    list-style: none;
    padding-left:0;
    padding:1rem;
    margin-top:0;
    li.header{
      background:rgba(0, 0, 0, .04);
      padding:1rem;
      font-size: .9rem;
      border:none;
    }
    li.active{
      // background:#F1F4FF;
      background:#5E49D0;
      color:white;
    }
    li{
      cursor: pointer;
      background:#FFFFFF;
      display: flex;
      align-items:center;
      padding:.7rem 1rem;
      font-size: .8rem;
      border: 1px solid rgba(0, 0, 0, .04);
      border-top:none;
      transition: all .2s;
      span{
        text-align: center;
      }
      span.one{
        flex:1;
      }
      span.two{
        flex:3;
      }
      span.three{
        flex:2;
      }
    }
  }
</style>